<template>
  <div class="businesses-container">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">走起</span>
    </div>
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #content>
        <!-- 头部信息 -->
        <author-info :authorInfo="headerInfo" :id="id"></author-info>
        <!-- 活动列表 -->
        <activity-list :activityList="activityList"></activity-list>
      </template>
      <template #list>
        <!-- 晒图 -->
        <side-list :activityList="sidePicList" :is_selected="is_selected" :type="type" @edit-type="editType" @edit-selected="editSelected"></side-list>
      </template>
    </refresh-list>
    <business-tar-bar :invitation_count="headerInfo.invitation_count" :id="id" @show-share-page="showSharePage = true"></business-tar-bar>
    <transition name="share">
      <share-page v-if="showSharePage" @hide-share="showSharePage = false"></share-page>
    </transition>
  </div>
</template>

<script>
import axios from '@/utils/request'
import AuthorInfo from '@/components/businesses/AuthorInfo'
import ActivityList from './ActivityList.vue'
import SideList from './SideList.vue'
import SharePage from '../public-detail/SharePage.vue'
import RefreshList from '../activity/public-component/RefreshList.vue'
import BusinessTarBar from './BusinessTarBar.vue'
export default {
  props: ['id'],
  components: {
    AuthorInfo,
    ActivityList,
    SideList,
    RefreshList,
    BusinessTarBar,
    SharePage
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      showSharePage: false,
      page: 1,
      sort_by: 'hot',
      is_selected: 1, //1(推荐) 0（最新）
      type: 'all', // all(全部)  video_post（视频）
      headerInfo: {},
      activityList: [],
      sidePicList: [] // 所有的类型
    }
  },
  methods: {
    // 请求头部数据信息
    async requestHeaderData() {
      /*
      请求地址：https://api.xmonster.cn/v2/businesses/8039
      请求方式： get
      */
      const data = await axios.get('/v2/businesses/' + this.id)
      if (data) {
        this.headerInfo = data
      }
    },
    //请求活动列表数据
    async requestActivityList() {
      /*
      请求地址：https://api.xmonster.cn/v2/businesses/8039/feeds
      请求方式： get
      请求参数：
      params:{
        limit: 3
      }
      */
      const data = await axios.get('/v2/businesses/' + this.id + '/feeds', {
        params: {
          limit: 10
        }
      })
      this.activityList = data
    },
    //请求晒图数据
    async requestSideList() {
      /*
      请求地址：https://api.xmonster.cn/v2/businesses/8039/posts
      请求方式：get
      请求参数：
      params:{
        page: 1  翻页
        sort_by： hot(推荐)  time(最新)
        is_selected： 1（推荐）      0（最新）
        type： all（所有）  video_post（视频）
        limit： 20   每次获取多少数据
      }
      */
      const data = await axios.get('/v2/businesses/' + this.id + '/posts', {
        params: {
          page: this.page,
          sort_by: this.sort_by,
          is_selected: this.is_selected,
          type: this.type,
          limit: 20
        }
      })
      if (data.length > 0) {
        this.sidePicList = [...this.sidePicList, ...data]
        this.status.loading = false
        this.status.finished = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    // 修改type值
    editType(val) {
      this.page = 1
      this.type = val
      this.sidePicList = []
      // 发起请求
      this.sendRequest()
    },
    // 修改selected的值
    editSelected(val) {
      this.page = 1
      this.is_selected = val
      this.sidePicList = []
      //发请求
      this.sendRequest()
    },
    async sendRequest() {
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        await this.requestSideList()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.headerInfo = {}
      this.activityList = []
      this.sidePicList = []
      this.requestHeaderData()
      this.requestActivityList()
      this.sendRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      this.requestSideList()
      this.status.loading = false
    }
  },
  async created() {
    this.requestHeaderData()
    this.requestActivityList()
    this.sendRequest()
  }
}
</script>

<style lang="less" scoped>
.businesses-container {
  padding-top: 46px;
  background-color: #f1f1f1;
  padding-bottom: 50px;
  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close,
    .share {
      height: 30px;
      width: 30px;

      img {
        height: 100%;
        width: 100%;
      }

      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          transform: rotate(180deg);
          height: 20px;
          width: 20px;
        }
      }
    }
  }
  .share-enter,
  .share-leave-to {
    opacity: 0;
  }
  .share-enter-active,
  .share-leave-active {
    transition: all 0.5s linear;
  }
  .share-enter-to,
  .share-leave {
    opacity: 1;
  }
}
</style>
